<template>
	<view class="swiper-container" :style="{borderRadius: `${borderRadius}rpx`}">
		<swiper :height="swiperHeight" :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
			:indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval"
			:duration="duration" :circular="circular" :style="{height: swiperHeight+'rpx',
				backgroundColor: bgColor}">
			<swiper-item v-for="(item,index) in list" :key="index" @click="clickBanner(item)">
				<view class="swiper-item" :style="{borderRadius: `${borderRadius}rpx`}">
					<image :src="item.image" :mode="imgMode"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		defineProps
	} from 'vue';

	defineOptions({
		name: 'gyd-swiper'
	});

	const props = defineProps({
		// 轮播图的数据
		list: {
			type: Array,
			default: [],
		},
		// list的高度，单位rpx
		swiperHeight: {
			type: String,
			default: '340'
		},
		// list的背景颜色
		bgColor: {
			type: String,
			default: '#fff'
		},
		// 图片的裁剪模式 
		imgMode: {
			type: String,
			default: 'aspectFit'
		},
		indicatorDots: {
			type: Boolean,
			default: false,
		},
		indicatorColor: {
			type: String,
			default: 'rgba(0, 0, 0, .3)',
		},
		indicatorActiveColor: {
			type: String,
			default: '#000000',
		},
		// 是否自动播放
		autoplay: {
			type: Boolean,
			default: true,
		},
		// 隔多久自动切换
		interval: {
			type: Number,
			default: 5000,
		},
		// 自动轮播时间间隔，单位ms
		duration: {
			type: Number,
			default: 1000,
		},
		// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
		circular: {
			type: Boolean,
			default: true,
		},
		// 圆角值
		borderRadius: {
			type: [Number, String],
			default: 10
		},
	})

	function clickBanner(item) {
		console.log('点击轮播图', item);
	}
</script>

<style lang="scss">
	.notice-details {
		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>